<p-toast position="top-right"></p-toast>

<div class="main-container enclosing-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-mobile"></i>
      KOReader Sync Configuration
      <app-external-doc-link docType="koReader"></app-external-doc-link>
    </h2>
    <p class="settings-description">
      Configure KOReader integration to sync your reading progress between your device and Booklore library.
    </p>
  </div>

  @if (hasPermission) {
    <div class="settings-content">
      <div class="preferences-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="pi pi-sync"></i>
            Sync Configuration
          </h3>
          <p class="section-description">
            Enable and configure synchronization between your Booklore library and KOReader device.
          </p>
        </div>

        <div class="settings-card">
          <form #koreaderForm="ngForm">
            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">Enable KOReader Sync</label>
                  <p-toggle-switch
                    name="syncEnabled"
                    [(ngModel)]="koReaderSyncEnabled"
                    (ngModelChange)="onToggleEnabled($event)"
                    inputId="syncEnabled"
                    [disabled]="!credentialsSaved">
                  </p-toggle-switch>
                </div>
                <p class="setting-description">
                  Turn on synchronization to automatically sync your reading progress.
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">KOReader API Path</label>
                  <div class="token-input-group">
                    <input
                      pInputText
                      id="koreaderEndpoint"
                      [value]="koreaderEndpoint"
                      readonly
                      class="token-input"/>
                    <p-button
                      icon="pi pi-copy"
                      outlined="true"
                      severity="info"
                      size="small"
                      (onClick)="copyText(koreaderEndpoint, 'API Path')"
                      [disabled]="!koreaderEndpoint">
                    </p-button>
                  </div>
                </div>
                <p class="setting-description">
                  The API endpoint path for your KOReader sync service.
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">KOReader Username</label>
                  <div class="token-input-group">
                    <input
                      pInputText
                      id="username"
                      name="username"
                      required
                      [(ngModel)]="koReaderUsername"
                      #usernameModel="ngModel"
                      [class.p-invalid]="usernameModel.invalid && usernameModel.touched"
                      [disabled]="editMode"
                      class="token-input"/>
                    <p-button
                      icon="pi pi-copy"
                      outlined="true"
                      severity="info"
                      size="small"
                      (onClick)="copyText(koReaderUsername, 'Username')"
                      [disabled]="!koReaderUsername">
                    </p-button>
                  </div>
                </div>
                <p class="setting-description">
                  Your username for authenticating with the KOReader sync service.
                </p>
                @if (editMode && usernameModel.invalid && usernameModel.touched) {
                  <small class="error-message">
                    Username is required.
                  </small>
                }
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">KOReader Password</label>
                  <div class="token-input-group">
                    <input
                      pInputText
                      id="password"
                      name="password"
                      required
                      minlength="6"
                      [type]="showPassword ? 'text' : 'password'"
                      [(ngModel)]="koReaderPassword"
                      #passwordModel="ngModel"
                      [class.p-invalid]="passwordModel.invalid && passwordModel.touched"
                      [disabled]="editMode"
                      class="token-input-password"/>
                    <p-button
                      icon="pi pi-copy"
                      outlined="true"
                      severity="info"
                      size="small"
                      (onClick)="copyText(koReaderPassword, 'Password')"
                      [disabled]="!koReaderPassword">
                    </p-button>
                    <p-button
                      [icon]="showPassword ? 'pi pi-eye-slash' : 'pi pi-eye'"
                      outlined="true"
                      severity="info"
                      size="small"
                      (onClick)="toggleShowPassword()"
                      [disabled]="!koReaderPassword">
                    </p-button>
                  </div>
                </div>
                <p class="setting-description">
                  Your password for authenticating with the KOReader sync service.
                </p>
                @if (editMode && passwordModel.invalid && passwordModel.touched) {
                  <small class="error-message">
                    Password must be at least 6 characters.
                  </small>
                }
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">Settings Management</label>
                  <p-button
                    [icon]="!editMode ? 'pi pi-save' : 'pi pi-pencil'"
                    outlined="true"
                    [severity]="!editMode ? 'success' : 'warn'"
                    [label]="!editMode ? 'Save' : 'Edit'"
                    size="small"
                    (onClick)="onEditSave()"
                    [disabled]="!editMode && !canSave">
                  </p-button>
                </div>
                <p class="setting-description">
                  Save your credentials or edit existing settings.
                </p>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  } @else {
    <div class="settings-content">
      <div class="access-denied-card">
        <i class="pi pi-lock"></i>
        <div class="access-denied-content">
          <h3>Access Restricted</h3>
          <p>
            Access to KOReader sync is restricted.
            <br>
            Please contact your administrator to request permission.
          </p>
        </div>
      </div>
    </div>
  }
</div>
